<template>
  <a-row v-if="mFileList.length">
    <a-col :span="24" v-for="item in mFileList" :key="item.uid">
      <a-button @click="handleClick($event,item)" type="link" size="small">
        <template #icon>
          <PictureOutlined v-if="['png','jpg','jpeg'].includes(item.ext as string)"/>
          <FileExcelOutlined v-else-if="['xls','xlsx'].includes(item.ext as string)"/>
          <FileWordOutlined v-else-if="['doc','docx'].includes(item.ext as string)"/>
          <FileOutlined v-else/>
        </template>
        {{ item.name }}
      </a-button>
      <a-image
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible:visibleMap[item.uid] === true,
        onVisibleChange(visible: Boolean){
          visibleMap[item.uid] = visible
        },
      }"
      :src="item.url"
    />
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { PropType, computed, onMounted, reactive, ref, watch } from 'vue';
import { MTableColumnType } from '../../Table/types';
import { UploadFile } from 'ant-design-vue';
import request from '/@/utils/request'
import { PictureOutlined,FileExcelOutlined,FileWordOutlined,FileOutlined } from '@ant-design/icons-vue';
interface MUploadFile extends UploadFile{
  ext?: string;
}
const props = defineProps({
  data: {
    // 当前行数据
    type: Object
  },
  column: {
    // 列定义
    type: Object as PropType<MTableColumnType>
  }
})
const mFileList = ref<Array<MUploadFile>>([])
const visibleMap = reactive({})
const getFileInfoUrl = computed(()=>{
  return props?.column?.componentProps?.getFileInfoUrl || import.meta.env.VITE_APP_GET_FILE_INFO_URL
})
/**-
 * 文件信息id转文件列表
 * @param fileInfoIds 
 */
 const fileInfoIdsToFileList =(fileInfoIds: String|undefined) =>{
  if(fileInfoIds) {
    request.post(getFileInfoUrl.value as string,{
      fileInfoIds
    }).then((res)=>{
      const v = res.data || res
      if(v instanceof Array && v.length) {
        mFileList.value = v
      }
    })
  }
}
watch(()=>props.data?.text,()=>{
  fileInfoIdsToFileList(props.data?.text)
})
onMounted(()=>{
  fileInfoIdsToFileList(props.data?.text)
})
// 文件点击
const handleClick = (e: Event,data: MUploadFile) =>{
  // 图片类型预览处理
  if(['png','jpg','jpeg'].includes(data.ext as string)) {
    visibleMap[data.uid] = true
  }
}
</script>
<style lang="less" scoped>

</style>